import "./index.scss"
import React, { Component } from 'react'
import { Link, withRouter } from "react-router-dom"
import CodeRain from './codeRain'
import { Tabs, Form, Popover, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
import { reg } from '../../utils/validate'
import { request } from "../../api";
import { ShowFail } from "../../api/ajax"
const { phone, pwd } = reg

const { TabPane } = Tabs;
function filluser(form) {
    if (localStorage.getItem("userinfo")) {
        console.log(form)
        // console.log(localStorage.getItem("userinfo"))
        const { phone, password } = JSON.parse(localStorage.getItem("userinfo"))
        form.setFieldsValue({
            phone,
            password
        })
    }
}
export default class Login extends Component {
    componentDidMount() {
        request.gettoken()

    }
    onFinish = (values) => {
        console.log('Received values of form: ', values);
    };
    render() {
        return (
            <div className="login">
                <CodeRain />
                <Tabs
                    defaultActiveKey="1"
                    centered
                    className="loginTab"
                >
                    <TabPane
                        tab="密码登录"
                        key="1"
                    >
                        <PassLogin />
                    </TabPane>
                    <TabPane
                        tab="验证码登录"
                        key="2"
                    >
                        <CpaLogin />
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

@withRouter
class PassLogin extends Component {
    componentDidMount() {
        filluser.call(this, this.PassFrom)

    }
    onFinish = (v) => {
        request.login(v)
            .then(res => {
                if (res.code == 200) {
                    localStorage.setItem("userinfo", v.remember ? JSON.stringify(v) : "")
                    this.props.history.push("/main")
                }
            })
    }
    render() {
        return (
            <Form
                ref={el => this.PassFrom = el}
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={this.onFinish}
            >
                <Form.Item
                    name="phone"
                    rules={[
                        { required: true, message: 'Please input your Phone!' },
                        { pattern: phone, message: "请输入正确的手机号" }
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Phone" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        { required: true, message: 'Please input your Password!' },
                        { pattern: pwd, message: "请输入合法密码" }
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>

                    <Popover content="请联系管理员" title="忘记密码？">
                        <span className="forgotPass">
                            Forgot password?
                        </span>
                    </Popover>,

                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
              </Button>
                </Form.Item>
            </Form>
        )
    }
}

var timer = null
class CpaLogin extends Component {
    state = {
        btnShow: true,
        flag: false,
        count: 10
    }
    componentDidMount() {
        filluser.call(this, this.CpaFrom)
    }
    onFinish = (v) => {
        console.log(v);
        request.judgeCpt(v)
            .then(res => {
                if (res.code == 200) {
                    this.props.history.push("/main")
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    phoneChange = ({ target }) => {
        this.setState({ flag: phone.test(target.value) })
    }
    sendCpt = () => {
        request.sendCpt(this.cptForm.current)
            .then(() => {
                timer = setInterval(() => {
                    this.setState({ count: this.state.count - 1, btnShow: false })
                    if (this.state.count <= 0) {
                        clearInterval(timer)
                        timer = null
                        this.setState({ count: 10, btnShow: true })
                    }
                }, 1000)
            })
    }
    render() {
        const { btnShow, count, flag } = this.state
        const { sendCpt, onFinish, phoneChange } = this
        return (
            <Form
                ref={el => this.CpaFrom = el}
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="phone"
                    rules={[
                        { required: true, message: 'Please input your Phone!' },
                        { pattern: phone, message: "请输入正确的手机号" }
                    ]}
                >
                    <Input
                        prefix={<UserOutlined className="site-form-item-icon" />}
                        placeholder="Phone"
                        onChange={phoneChange}
                    />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    rules={[{ required: true, message: 'Please input your Captcha!' }]}
                    style={{ display: "flex", flexWrap: "nowrap" }}
                >
                    <Input
                        prefix={<MailOutlined className="site-form-item-icon" />}
                        placeholder="Captcha"
                        style={{ marginRight: "20px" }}
                        addonAfter={
                            btnShow ? <Button
                                disabled={!flag}
                                onClick={sendCpt}
                            >Send</Button> : <Button
                                disabled
                                block
                            >{count} S</Button>
                        }

                        maxLength="4"
                    />
                </Form.Item>
                <Form.Item
                >
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
              </Button>
                </Form.Item>
            </Form>
        )
    }
}